<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 350px;
            height: 500px;
            border: 5px solid red;
        }
        #box1{
            border-image-source: url("img/border.png");
            /*
              第一个值：水平方向
              第二个值：垂直方向
            */
            border-image-slice:33% 33%;
            /*默认是拉伸效果*/
            border-image-repeat: round ;
            /*border-image-outset:10;*/
            border-image-width: 28;
        }
    </style>
</head>
<body>
<div id="box1"></div>
</body>
</html>